// +----------------------------------------------------------------------
// | likeshop开源商城系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | gitee下载：https://gitee.com/likeshop_gitee
// | github下载：https://github.com/likeshop-github
// | 访问官网：https://www.likeshop.cn
// | 访问社区：https://home.likeshop.cn
// | 访问手册：http://doc.likeshop.cn
// | 微信公众号：likeshop技术社区
// | likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
// | likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | likeshop团队版权所有并拥有最终解释权
// +----------------------------------------------------------------------
// | author: likeshop.cn.team
// +----------------------------------------------------------------------

<template>
	<view>
		<view class="confirm-order">
			<view class="confirm-con">
				<!-- 收货方式 -->
				<view class="contain">
					<u-tabs v-if="false" :list="addressTabsList" :is-scroll="addressTabsList.length === 1"
						:current="addressTabsIndex" :active-color="primaryColor" bar-width="100"
						:bar-style="{ top: '100%' }" @change="changeDelivery" />
					<!-- 快递配送 -->
					<view v-if="false" v-show="addressTabsList[addressTabsIndex]['sign'] === 'express'"
						class="receiving-card" @click="onAddressExpress">
						<u-image class="icon-md mr20" width="44" height="44" src="/static/images/icon_address.png"
							mode="scaleToFill" />
						<view class="receiving-content">
							<template v-if="address.id">
								<view class="md black bold">
									<text>{{ address.contact }}</text>
									<text class="ml10">{{ address.telephone }}</text>
								</view>
								<view class="xs black mt10">
									{{ address.province + address.city + address.district + address.address }}
								</view>
							</template>
							<template v-else>
								<view>请选择收货地址</view>
							</template>
						</view>
						<u-icon name="arrow-right" />
					</view>
					<!-- 门店自提 -->
					<view v-if="false" v-show="addressTabsList[addressTabsIndex]['sign'] === 'store'"
						class="receiving-card" @click="onAddressStore">
						<u-image class="icon-md mr20" width="44" height="44" src="/static/images/icon_address.png"
							mode="scaleToFill" />
						<view class="receiving-content">
							<template v-if="storeInfo.id">
								<text class="md black bold">{{ storeInfo.name }}</text>
								<text class="xs black mt10">{{ storeInfo.shop_address }}</text>
								<text class="xs muted mt10">
									<text>营业时间：</text>
									<text>{{ storeInfo.business_start_time }} - {{ storeInfo.business_end_time }}</text>
								</text>
							</template>
							<template v-else>
								<view>请选择门店地址</view>
							</template>
						</view>
						<u-icon name="arrow-right" />
					</view>
				</view>

				<view class="goods contain">
					<view class="nosocomium-container ml20 mb20">
						<custom-image :lazy-load="true" width="40rpx" height="40rpx" lazy-load
							:src="orderInfo.merchant.logo"></custom-image>
						<text>{{ orderInfo.merchant.name }}</text>
					</view>
					<view class="item row goods-de">
						<view class="goods-img">
							<custom-image :lazy-load="true" width="180rpx" height="180rpx" radius="10rpx" lazy-load
								:src="orderInfo.pics[0]"></custom-image>
						</view>
						<view class="goods-info ml20 mr20">
							<view class="goods-name line2 mb10">{{orderInfo.title}}</view>
							<text class="merchant-name mb10 xxs" v-if="orderInfo.brand">{{orderInfo.brand}}</text>
							<text class="merchant-name mb10 xxs" v-if="orderInfo.dose">剂量：{{orderInfo.dose}}</text>
							<!-- <view class="goods-price">团购价<text class="unit">￥</text><text class="price">{{ orderInfo.price ? (orderInfo.price / 100).toFixed(2) : '0.00' }}</text></view> -->
						</view>
					</view>
					<!-- <order-goods :team="{need: orderInfo.team_need}" :list="goodsLists" :delivery="delivery" mode="comfirm"></order-goods> -->
					<!-- <view class="item row-between">
						<view>配送方式</view>
						<view>快递</view>
					</view> -->
					<!-- <view class="item row-between">
						<view>买家留言</view>
						<u-input v-model="userRemark" class="flex1 ml20" :clearable="false" placeholder="请添加备注（150字以内）"></u-input>
					</view> -->
				</view>
				<view v-show="addressTabsList[addressTabsIndex]['sign'] === 'store'" class="contain store-from">
					<view class="store-from-item">
						<text>联系方式</text>
						<u-input v-model="userMobile" class="flex1" type="text" input-align="right" :clearable="false"
							placeholder="请输入联系方式" />
					</view>
				</view>
				<!-- <view class="contain benefit">
					<view class="item row-between" @tap="showCoupon = true">
						<view>优惠券</view>
						<view class="row">
							<text class="primary" v-if="orderInfo.discount_amount">-￥{{orderInfo.discount_amount }}</text>
							<text v-else-if="usableCoupon.length" class="primary">{{usableCoupon.length + '张可用'}}</text>
							<text v-else class="muted">无优惠券可用</text>
							<image class="icon-sm ml20" src="/static/images/arrow_right.png"></image>
						</view>
					</view>
					<view class="item row" @tap="changeIntegral" v-if="orderInfo.integral_switch">
						<view>积分抵扣</view>
						<view class="ml20 muted xs row" style="flex:1">
							共{{orderInfo.user_integral}}积分{{orderInfo.user_integral < orderInfo.integral_limit ? "，满" + orderInfo.integral_limit + "可用" : "" }}
							<view style="margin-top: 10rpx;" @tap.stop="dialogIntegralDesc">
								<u-icon class="ml10" color="#999"  size="30"  name="question-circle"></u-icon>
							</view>
						</view>
						<checkbox :disabled="orderInfo.user_integral < orderInfo.integral_limit || orderInfo.integral_config == 0" :checked="Boolean(useIntegral)">
						</checkbox>
					</view>
				</view> -->
				<view v-if="hospitalData" class="price contain">
					<view class="item row-between">
						<view class="mr10">服务门店：{{ hospitalData.name }}</view>
						<view @click="changeHospital" class="row" style="flex-shrink: 0;">
							<text class="muted">更换门店</text>
							<image class="icon-sm ml20" src="/static/images/arrow_right.png"></image>
						</view>
					</view>
				</view>
				<view class="price contain">
					<view class="item row-between">
						<view>订单总金额</view>
						<view class="price-num">¥{{orderInfo.price / 100}}</view>
					</view>
					<view class="item row-between">
						<view>预付金</view>
						<view class="price-num">¥{{orderInfo.prepay_amount / 100}}</view>
					</view>
					<view v-if="userInfo.new_discount_num===1||!userInfo.id" class="item row-between">
						<view>新客红包</view>
						<view class="price-num">- ¥{{orderInfo.new_user_discount / 100}}</view>
					</view>
					<view class="item row-between">
						<view>到店支付尾款</view>
						<view class="price-num">¥{{restAmount}}</view>
					</view>
					<!-- <view v-if="false" class="item row-between">
						<view>运费</view>
						<view>¥{{orderInfo.shipping_price}}</view>
					</view>
					<view class="item row-between" v-if="orderInfo.discount_amount">
						<view>优惠券</view>
						<view class="primary">-¥{{orderInfo.discount_amount}}</view>
					</view>
					<view class="item row-between" v-if="orderInfo.integral_amount">
						<view>积分抵扣</view>
						<view class="primary">-¥{{orderInfo.integral_amount}}</view>
					</view> -->
				</view>
			</view>
			<view class="footer bg-white row-between fixed">
				<view class="all-price lg row">
					<text>合计：</text>
					<view class="primary">
						<price-format :first-size="36" :second-size="36" :price="totalPirce"></price-format>
					</view>
				</view>
				<button class="btn br60 white" size="md" hover-class="none" @tap="onSubmitOrder">
					提交订单
				</button>
			</view>
		</view>
		<!-- <loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view> -->
		<!-- <loading-view v-if="isFirstLoading"></loading-view> -->
		<u-popup v-model="showCoupon" border-radius="14" mode="bottom" closeable>
			<view class="pop-title row-between">
				<view class="title">优惠券</view>
			</view>
			<view v-if="showCoupon">
				<tabs :active="couponTabsIndex" :config="{underLineWidth: 100}">
					<tab :title="'可使用优惠券 (' + usableCoupon.length + ')'">
						<coupon-obj :list="usableCoupon" :type="0" @change="onSelectCoupon"
							:coupon-id="couponId"></coupon-obj>
					</tab>
					<tab :title="'不可用优惠券 (' + unusableCoupon.length + ')'">
						<coupon-obj :list="unusableCoupon" :type="1" @change="onSelectCoupon"></coupon-obj>
					</tab>
				</tabs>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		buyOrder
	} from '@/api/order.js'
	import {
		getGoodsSearch
	} from '@/api/store';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		orderBuy,
		getOrderCoupon,
		getDelivery
	} from '@/api/order'
	import {
		teamBuy
	} from '@/api/activity'
	import {
		prepay,
		getMnpNotice,
		getPayway
	} from '@/api/app'
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [PageExposure],
		data() {
			return {
				isFirstLoading: true, // 首次页面加载loading
				showLoading: false, // Loading: 显示 | 隐藏
				address: {}, // 收货地址信息
				orderInfo: {}, // 订单信息
				goodsLists: [], // 商品列表

				addressId: '', // 收货地址ID
				useIntegral: 0, // 使用积分
				userRemark: '', // 用户留言
				userConsignee: '', // 取货人
				userMobile: '', // 联系电话

				storeInfo: {}, // 门店信息

				couponId: "", // 优惠券ID
				showCoupon: false, // 显示优惠券Popup
				couponTabsIndex: 0, // 优惠券Tabs索引
				usableCoupon: [], // 优惠券--可使用
				unusableCoupon: [], // 优惠券--不可用
				hospitalData: null,

				bargainLaunchId: -1,
				hospital_id: 0,
				addressTabsIndex: 0, // 地址Tabs索引
				// 地址Tabs列表
				addressTabsList: [{
					id: 1,
					sign: 'express',
					name: '快递配送',
				}, {
					id: 2,
					sign: 'store',
					name: '门店自提',
				}],
				params: {
					page: 1,
					pagesize: 10,
					id: null
				},
				marketer_id: null
			};
		},

		computed: {
			delivery() {
				return this.addressTabsList[this.addressTabsIndex]['id']
			},
			totalPirce() {
				if (this.userInfo.new_discount_num === 1 || !this.userInfo.id) {
					return ((this.orderInfo.prepay_amount - this.orderInfo.new_user_discount) / 100) || 0
				}
				return (this.orderInfo.prepay_amount / 100) || 0
			},
			restAmount() {
				return ((this.orderInfo.price - this.orderInfo.prepay_amount) / 100) || 0
			},
			...mapGetters(['userInfo'])
		},

		onLoad(options) {
			const order_id = JSON.parse(decodeURIComponent(options.order_id))
			this.marketer_id = options.marketer_id ? JSON.parse(decodeURIComponent(options.marketer_id)) : null
			this.params.id = order_id
			this.getGoodsList()
			// 配送方式
			// getDelivery()
			// 	// 请求结果判断
			// 	.then(({ code, data, msg }) => {
			// 		if (code != 1) throw new Error(msg)
			// 		return data
			// 	})
			// 	// 配送方式Tabs处理
			// 	.then(data => {
			// 		// 快递
			// 		if (!data.is_express) {
			// 			this.addressTabsList = this.addressTabsList.filter(item => item.sign !== 'express')
			// 		}
			// 		// 自提
			// 		if (!data.is_selffetch) {
			// 			this.addressTabsList = this.addressTabsList.filter(item => item.sign !== 'store')
			// 		}
			// 	})
			// 	// 页面数据初始化
			// 	.then(() => {
			// 		this.handleOrderMethods('info')
			// 		this.initCouponData()
			// 	})
			// 	// 监听全局事件
			// 	.then(() => {
			// 		uni.$on("selectaddress", params => {
			// 			this.addressId = params.id
			// 			this.handleOrderMethods('info')
			// 		})

			// 		uni.$on('payment', params => {
			// 			setTimeout(() => {
			// 				uni.$off("payment")

			// 				if (params.result) {
			// 					uni.redirectTo({
			// 						url: `/pages/pay_result/pay_result?id=${params.order_id}`
			// 					})
			// 				} else {
			// 					uni.redirectTo({
			// 						url: '/pages/user_order/user_order'
			// 					})
			// 				}
			// 			}, 500)
			// 		})

			// 		uni.$on("store", params => {
			// 			this.storeInfo = params
			// 		})
			// 	})
			// 	.catch(err => {
			// 		console.log(err)
			// 	})
			this.userMobile = this.userInfo.mobile
		},

		onUnload() {
			// 取消全局监听
			uni.$off(['selectaddress', 'store'])
		},

		methods: {
			async getGoodsList() {
				getGoodsSearch(this.params).then(res => {
					if (res.s === 0) {
						this.orderInfo = res.d.data[0]
					}
					console.log(this.orderInfo)
					this.goodsLists = [this.orderInfo]
				})
			},
			// 更改配送方式
			changeDelivery(index) {
				this.addressTabsIndex = index
				this.handleOrderMethods('info')
			},
			changeHospital() {
				uni.navigateTo({
					url: '/pages/goods_details/goods_details?action=switch_hospital&id=' + this.goods_id
				});
			},
			// 点击选择收货地址
			onAddressExpress() {
				uni.navigateTo({
					url: `/pages/user_address/user_address?type=${1}`
				})
			},
			// 点击门店自提
			onAddressStore() {
				uni.navigateTo({
					url: `/bundle/pages/store_list/store_list`
				})
			},

			// 更改积分使用
			changeIntegral() {
				const useIntegral = this.useIntegral

				const orderInfo = this.orderInfo
				const integral_limit = orderInfo.integral_limit
				const user_integral = orderInfo.user_integral

				if (integral_limit > user_integral) return this.$toast({
					title: "未满足使用条件"
				})

				this.useIntegral = useIntegral ? 0 : 1
				this.$nextTick(() => this.handleOrderMethods('info'))
			},

			// 积分使用说明Dialog
			dialogIntegralDesc() {
				const desc = this.orderInfo.integral_desc

				uni.showModal({
					title: '积分使用说明',
					content: desc,
					confirmColor: "#FF2C3C",
					showCancel: false
				})
			},

			// 选择优惠券
			onSelectCoupon(value) {
				this.couponId = value
				this.showCoupon = false
				this.handleOrderMethods('info')
			},

			// 获取微信授权
			authWechatMessage() {
				return new Promise((resolve, reject) => {
					getMnpNotice({
						scene: 1
					}).then(({
						code,
						data,
						msg
					}) => {
						if (code != 1) throw new Error(msg)
						return data
					}).then(data => {
						if (!data.length) return reject()
						uni.requestSubscribeMessage({
							tmplIds: data,
							success(res) {
								resolve(res)
							},
							fail(err) {
								reject(err)
							},
						})
					}).catch(err => {
						reject(err)
					})
				})
			},

			// 点击订单提交
			onSubmitOrder() {
				uni.showModal({
					title: '温馨提示',
					content: '是否确认下单?',
					confirmColor: '#FF2C3C',
					success: ({
						confirm
					}) => {
						if (!confirm) return
						let params = {}
						if (this.marketer_id) {
							params = {
								product_id: this.params.id,
								marketer_id: this.marketer_id,
								join_group_order_id: this.orderInfo.last_gruop[0].id,
								is_prepare: true
							}
						} else {
							params = {
								product_id: this.params.id,
								is_prepare: true
							}
						}
						console.log(params, '下单参数')
						buyOrder(params).then(res => {
							if (res.s !== 0) {
								return uni.showToast({
									title: res.err_str,
									icon: 'none',
								})
							}

							prepay({
								from: 'order',
								order_id: res.d.id
							}).then(res => {
								let args = res.data;
								this.showLoading = false
								if (res.s === 0) {
									return wxpay(res.d.pay_data).then((resPay) => {
										if (resPay == 'success') {
											this.$toast({
												title: "支付成功"
											})
											uni.$emit("refreshorder")
											uni.navigateTo({
												url: '/pages/place_order/place_order?id=' +
													this.params.id
											})
										}
									})
								}

							});
						})
					}
				});
			},

			// 初始化优惠券数据
			initCouponData() {
				getOrderCoupon({
					goods: this.goods
				}).then(({
					code,
					data,
					msg
				}) => {
					if (code != 1) throw new Error(msg)
					return data
				}).then(data => {
					this.usableCoupon = data.usable
					this.unusableCoupon = data.unusable
				}).catch(err => {
					console.log(err)
				})
			},

			// 初始化页面数据
			async initPageData(from) {
				this.showLoading = true

				try {
					const {
						code,
						data,
						msg
					} = this.teamId ?
						await teamBuy(from) :
						await orderBuy(from)

					if (code == 1) {
						this.address = data.address
						this.goodsLists = data.goods_lists
						this.orderInfo = data
						this.hospitalData = data.hospital
						this.$nextTick(() => {
							this.isFirstLoading = false
						})
					} else {
						throw new Error(msg)
					}
				} catch (err) {
					console.log(err)
					this.$toast({
						title: '网络异常，请重新进入页面'
					})
				} finally {
					this.showLoading = false
				}
			},

			// 订单提交
			async handleOrderSubmit(from) {
				this.showLoading = true

				from.remark = this.userRemark
				from.type = this.type

				try {
					const {
						code,
						data,
						msg
					} = this.teamId ?
						await teamBuy(from) :
						await orderBuy(from)

					if (code == 1) {
						uni.redirectTo({
							url: `/pages/payment/payment?from=${data.type}&order_id=${data.order_id}`
						})
					} else {
						throw new Error(msg)
					}
				} catch (err) {
					console.log(err)
					// this.$toast({ title: '下单异常，请重新操作' })
				} finally {
					this.showLoading = false
				}
			},

			// 订单处理
			handleOrderMethods(action) {
				// 订单提交数据
				const orderFrom = {
					action,
					goods: this.goods,
					delivery_type: this.delivery,
					use_integral: this.useIntegral,
					address_id: this.addressId,
					coupon_id: this.couponId,
					bargain_launch_id: this.bargainLaunchId == -1 ? '' : this.bargainLaunchId,
					hospital_id: this.hospital_id
				}

				// 门店自提
				if (this.addressTabsList[this.addressTabsIndex]['sign'] === 'store') {
					orderFrom.selffetch_shop_id = this.storeInfo.id
					orderFrom.consignee = this.userConsignee
					orderFrom.mobile = this.userMobile
				}

				// 拼团
				if (this.teamId) {
					const goods = this.goods[0]

					delete orderFrom.goods

					orderFrom.item_id = goods.item_id
					orderFrom.goods_num = goods.num
					orderFrom.team_id = this.teamId
					orderFrom.found_id = this.foundId
				}

				switch (action) {
					case 'info':
						this.initPageData(orderFrom)
						break;
					case 'submit':
						this.handleOrderSubmit(orderFrom)
						break;
				}
			}
		},


	}
</script>
<style>
	.confirm-order .confirm-con {
		overflow: hidden;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	.confirm-order .contain {
		border-radius: 14rpx;
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		overflow: hidden;
	}

	.confirm-order .img-line {
		height: 1.5px;
		width: 100%;
		display: block;
	}


	.confirm-order .coupons {
		height: 100rpx;
		padding: 0 24rpx;
	}

	.goods .title {
		padding: 22rpx 24rpx;
		border-bottom: 1px solid #F6F6F6;
	}

	.goods .all-num {
		padding: 22rpx 24rpx;
		border-bottom: 1px dotted #F6F6F6;
	}

	.confirm-order .footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.confirm-order .price {
		padding: 28rpx 20rpx;
	}

	.confirm-order .price .item:not(:last-of-type) {
		margin-bottom: 20rpx;
	}

	.confirm-order .goods>.item,
	.confirm-order .benefit>.item {
		padding: 0 24rpx;
		/* height: 80rpx; */
	}

	.confirm-order .btn {
		background: linear-gradient(90deg, rgba(249, 95, 47, 1) 0%, rgba(255, 44, 60, 1) 100%);
		padding: 0 50rpx;
	}

	.confirm-order .van-cell:after {
		border: none;
	}

	.goods .shop-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.pop-title {
		height: 100rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.pop-title .title {
		margin-left: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 36rpx;
	}

	.receiving-way {
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.receiving-card {
		display: flex;
		align-items: center;
		min-height: 160rpx;
		padding: 20rpx;
		border-top: 1px solid #F2F2F2;
	}

	.receiving-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.store-from {
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.store-from-item {
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.store-from-item:nth-child(n+2) {
		border-top: 1px dashed #F2F2F2;
	}

	.goods-de {
		display: flex;
		align-items: flex-start;
	}

	.nosocomium-container {
		display: flex;
		align-items: center;
	}

	.goods-name {
		font-size: 32upx;
		font-weight: 500;
	}

	.price-num {
		color: #FF2C3C;
	}
</style>